<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="obj.name='棒槌鹏'">修改obj里的name</button>
        <button @click="obj.age = 99">修改obj里的age</button>
        <button @click="obj = { name:'无语鹏', age: 15 }">obj的指向给变了</button>
        <p>{{ obj.name }} --- {{ obj.age }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    name: 'jack',
                    age: 16
                }
            },

            watch: {
            /*
                // 侦听obj
                // 侦听器要侦听的数据发生变化就调用
                // 你改的是obj.name，对于obj而言，没变过
                // 所以要注意：你侦听一个对象，默认是侦听不到他里面属性的变化
                // 如果侦听的是对象，默认情况下除非这个对象的指向发生改变，才会触发，否则不触发
                obj (newVal, oldVal) {

                    console.log('obj被改了', newVal, oldVal)
                },

                // 我就是想侦听obj里属性的变化，怎么办？
                // 直接写对象.属性名就能侦听这个属性的变化了
                // 侦听什么属性，就只能是这个属性发生改变才触发的了
                'obj.name' (newVal, oldVal) {
                    console.log('obj里的name变化了', newVal, oldVal)
                },
            */
                // 有没有一种我侦听obj，让obj里任何属性发生改变都能触发的侦听器呢？
                // 有！那就是用深度侦听
                obj: {
                    // 开启深度侦听
                    deep: true,
                    // 当侦听到obj里任何属性发生改变都会触发这个handler函数
                    // 深度侦听时这两个参与没意义了，因为他不是得到修改前后的属性值
                    // 他就是得到obj的指向，obj的指向又没变过，所以没意义
                    handler (newVal, oldVal) {
                        console.log('obj里有属性变化了', newVal, oldVal)
                    },
                    // 要不要页面一打开就立即调用一次handler
                    // 为true代表立即调用
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>